<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        audio {
            margin: 0 auto; 
        }
        div{
            background-color: rgb(207, 249, 207);
        }
        .outer1{
            width: 1000px;
            border: 1px solid #000;
            margin: 0 auto;
            column-count: 4;
            column-gap: 20px;
            column-rule: 1px dotted #000;
            padding: 5px;
        }
        h1{
            column-span: all;
            text-align: center;
        }
        .outer1 img{
            width: 100%;
        }
        .outer1 .detail{
            text-align: center;
            font-size: 0.8em;
        }
        .outer2{
            width: 1000px;
            border: 1px solid #000;
            margin: 0 auto;
            column-count: 4;
            column-gap: 10px;
            padding: 5px;
            margin-top: 20px;
        }
        .outer2 img{
            width: 100%;5
            transition: all 0.5s;
        }
        .outer2 img:hover{
            box-shadow: 0 0 10px #000;
            transform: scale(1.02);
        }
    </style>
</head>
<body>
    <div class="outer1">
        <h1><font color="rgb(119, 218, 89)">铃芽户缔 すずめの戸締まり</font></h1>
        <p>铃芽是一位生活在九州的一个宁静小镇上的17岁少女，某天她遇到了“正在找门”的旅行青年草太。跟随着他的脚步，</p>
        <p>铃芽来到了山上的废墟之地，她发现有一扇古老的门孤零零地伫立在那。铃芽仿佛被什么吸引了一般，将手伸向了那扇门……</p>
        <img src="r.jpg" alt=""><p class="detail"><font color="rgb(119, 218, 89)">すずめの戸締まり</font></p>
        <p>“铃芽，我喜欢”“至于你，碍事”</p> 
        <p>大臣话音刚落，草太竟然变成了椅子！而且那是铃芽小时候妈妈作为生日礼物送给她的缺了一条腿的椅子。为了抓住大臣，草太以三条腿椅子的样子跑了出去，
            铃芽也慌忙地跟了上去。</p>
        <p>不久之后，日本各地的门开始一扇接一扇地打开。在不可思议的门和小猫的引导下，铃芽在九州、四国、关西，还有东京及日本列岛开始了“关门之旅”。
            途中铃芽得到了很多帮助，并且当她到达目的地时，她发现了一个被遗忘的真相</p>        
    </div>
    <div class="outer2">
        <h1>铃芽之旅</h1>
        
        <img src="./t.jpg" alt="">
        <img src="./i.jpg" alt="">
        <img src="./k.jpg" alt="">
        <img src="./e.jpg" alt="">
        <img src="./u.jpg" alt="">
        <img src="./铃芽.jpg" alt="">
        <img src="./y.jpg" alt="">
        <img src="./o.jpg" alt="">
    </div>
    <audio controls="controls" autoplay="autoplay">
        <source src="铃芽主题曲.mp3">
</body>
</html>